<template>
	<view>
		<view class="main">
			<u-form :model="form" ref="uForm" style="margin-bottom: 40rpx;">
				<u-form-item label="旧密码" prop="password" label-position="top">
					<u-input v-model="form.password" type="password" :border="true" :password-icon="true" />
				</u-form-item>
				<u-form-item label="新密码" prop="newPassword" label-position="top">
					<u-input v-model="form.newPassword" type="password" :border="true" :password-icon="true" />
				</u-form-item>
				<u-form-item label="确认新密码" prop="affirm" label-position="top">
					<u-input v-model="form.affirm" type="password" :border="true" :password-icon="true" />
				</u-form-item>
			</u-form>
			<u-button @click="submit" >确认修改</u-button>
		</view>
	</view>
</template>

<script>
	import {API} from "@/config/myApi.js"
	export default {
		data() {
			// const affirmPass =
			return {
				form: {
						password: '',
						newPassword: '',
						affirm:""
					},
				rules: {
					password: [
						{ 
							required: true, 
							message: '请输入旧密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: 'change',
						},
						{
							min: 6,
							message: '密码不能少于6位',
							trigger: 'change'
						}
					],
				newPassword: [
						{
							required: true, 
							message: '请输入新密码',
							trigger: 'change',
						},
						{
							min: 6,
							message: '密码不能少于6位',
							trigger: 'change'
						}
					],
					affirm:[
						{
							required: true, 
							message: '请再次输入密码',
							trigger: 'change',
						},
						{
							validator:(rule, value, callback) => {
									if (value === '') {
									callback(new Error('请再次输入密码'));
								} else if (value !== this.form.newPassword) {
									callback(new Error('两次输入密码不一致!'));
								} else {
									callback();
								}
							},
							trigger:"change"
						}
					]
				},
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		computed:{
			getNewPassword(){
				return this.form.newPassword === this.form.affirm
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						API.modifyPassAsync({
							newPassword:this.md5(this.form.newPassword),
							password:this.md5(this.form.password)
						}).then(res=>{
							if(res.code === 200){
								uni.showToast({
									title:"密码修改成功",
								    icon:'none',
									success(){
										this.form = {
											password: '',
											newPassword: '',
											affirm:""
										}
										setTimeout(()=>{
											uni.removeStorageSync("token")
											uni.reLaunch({
												url:"/pages/login/login",
											})
										},1000)
									}
								})
								
								
							}else{
								uni.showToast({
									title:res.message,
								    icon:'none'
								})
							}
						})
					} else {
						uni.showToast({
							title:"密码校验失败",
						    icon:'none'
						})
					}
				});
			},
			
		}
	}
</script>

<style>
.main{
	margin: 24rpx 30rpx;
	padding: 18rpx 18rpx 40rpx;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 0 4rpx 0 #ccc;
}
</style>
